<!--使用记录-->
<template>
  <div class="ele-body">
    <el-card>
      <div class="flex-align-center keyword-top">
        <div class="keyword-title">使用记录</div>
      </div>
      <!-- 数据表格   :toolbar="false"-->
      <ele-pro-table
        :selection.sync="selection"
        ref="table"
        :columns="columns"
        :datasource="datasource"
      >
        <!--<template v-slot:status="{ row }">
          &lt;!&ndash;status  1.支出2.充值3.续费&ndash;&gt;
          <div>{{row.status==1 ? '支出' : row.status==2 ? '充值' : '续费' }}</div>
        </template>
        <template v-slot:shopCode="{ row }">
          <div>{{row.shopCode ||  '&#45;&#45;' }}</div>
        </template>-->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="removeBatch"
          >
            删除
          </el-button>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此使用记录吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>

    </el-card>
  </div>
</template>

<script>
  import {pointRecharge,pointRechargePage,recordDelete} from '@/api/recordList'
  import {rechargeDelete} from "@/api/oem";
  export default {
    name: "index",
    data() {
      return {
        // 表格选中数据
        selection: [],
        // 表格列配置
        columns:[
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'usuTo',
            label: '功能',
            sortable: 'custom',
            showOverflowTooltip: true,
          },
          {
            prop: 'deductionSource',
            label: '扣点模式',
            sortable: 'custom',
            showOverflowTooltip: true,
          },
          {
            prop: 'taskName',
            label: '任务名称',
            sortable: 'custom',
            showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
        return cellValue ? cellValue : '--';
      }
          },
          {
            prop: 'money',
            label: '扣点数',
            sortable: 'custom',
            showOverflowTooltip: true,
          },
          {
            prop: 'createTime',
            label: '消费时间',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : '--';
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        columns2: [
          {
            prop: 'shopCode',
            label: '活动任务',
            sortable: 'custom',
            showOverflowTooltip: true,
            slot: 'shopCode',
          },
          {
            prop: 'money',
            label: '使用点数',
            sortable: 'custom',
            showOverflowTooltip: true,
          },
          {
            prop: 'createTime',
            label: '使用时间',
            sortable: 'custom',
            showOverflowTooltip: true,
          }
        ],
         /*
         datasource:[
         {
          merchantName:'商家名称',
          money:10,
          createTime:'2023-06-16 00:00:00'
        },
          {
            merchantName:'ds',
            money:5,
            createTime:'2023-06-16 10:54:00'
          },{
            merchantName:'summary',
            money:10,
            createTime:'2023-06-16 10:00:00'
          }
          ]*/
      };
    },
    // 路由刷新
    activated(){
      this.reload()
    },
    created(){
      // this.init()
    },
    methods: {
      init(){
        console.log('使用记录init========================')
        // pointRecharge(this.$store.state.user.info.merchantId,2)
        pointRechargePage({
          limit:10,
          page:1,
          id: this.$store.state.user.info.merchantId,
          types: 2
        })
          .then((data) => {
            this.datasource=data.data
            console.log('data.data', data.data)
            // this.$message.success(data.msg);
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return pointRechargePage({ ...where, ...order, page, limit,
          id: this.$store.state.user.info.merchantId,
          types: 2
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },

      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        recordDelete({ids:[row.id]})
          .then((msg) => {
            loading.close();
            this.$message.success('删除成功');
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
      /* 批量删除 */
      removeBatch() {
        if (!this.selection.length) {
          this.$message.error('请至少选择一条数据');
          return;
        }
        this.$confirm('确定要删除选中的使用记录吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$loading({ lock: true });
            recordDelete({ids: this.selection.map((d) => d.id)})
              .then((msg) => {
                loading.close();
                this.$message.success('删除成功');
                this.reload();
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },
    }
  }
</script>

<style scoped lang="less">
  .keyword-top{
    padding:4px 4px 20px;
    .keyword-title{
      font-size: 20px;
      line-height: 24px;
      margin-right: 20px;
      color: #000000;
    }
    .border{
      border-radius: 5px;
      overflow: hidden;
      .no-select-type,.select-type{
        width: 68px;
        height: 29px;
      }
      .select-type{
        background: #1E6CEB;
        color: #FFFFFF;
      }
      .no-select-type{
        border: 1px solid #F5F5F5;
        color: #ABAFB5;
      }
    }
  }
  .resetting-btn{
    background: #F5F5F5;
  }

</style>
